	<div xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ice="http://www.icesoft.com/icefaces/component">

	<h2>Sortable dataTable Component</h2>

	<p>In this example commandSortHeader components have been added to
	the table headers. Clicking on the headers will sort the table data.</p>

		<!--
            This is a very basic table comprising four columns. Each
            row represents an inventory item.  Each column represents a
            inventory item property.  commandSortHeader components have been
            added ot the table headers.

            The sortAscending and sortColumn attributes are set when a command
            sortColumnName header is activated.  The sortColumn and sortAscending
            data can then be sortColumnName by a sortColumnName algorithm if a
            change is detected.
        -->

		<ice:dataTable id="componentConfigBean" 
		binding="#{componentConfigBean.dataTable}"
			sortColumn="#{componentConfigBean.sortColumnName}"
			sortAscending="#{componentConfigBean.ascending}"
			value="#{componentConfigBean.dataList}" var="dataItem">
	<!-- click box R -->		
	<ice:column>
		<ice:selectBooleanCheckbox value="#{componentConfigBean.selectedRow}"
			disabled="#{componentConfigBean.editModeRow}"
			rendered="#{componentConfigBean.selectMultiple}" />
	</ice:column>
			<!-- ID -->
			<ice:column>
				<f:facet name="header">
					<ice:commandSortHeader
						columnName="#{componentConfigBean.idValue}" arrow="true">
						<ice:outputText value="#{componentConfigBean.idValue}"
							rendered="#{!componentConfigBean.editModeRow}" />
                        <ice:inputText
							value="#{componentConfigBean.id}"
							rendered="#{componentConfigBean.editModeRow}" />
					</ice:commandSortHeader>
				</f:facet>
				<ice:outputText value="#{dataItem.id}" rendered="#{dataItem.id!=0}" />
				<ice:outputText value="New" rendered="#{dataItem.id==0}"
					styleClass="italic" />
			</ice:column>

			<!-- Component name -->
			<ice:column>
				<f:facet name="header">
					<ice:commandSortHeader
						columnName="#{componentConfigBean.componentName}" arrow="true">
						<ice:outputText value="#{componentConfigBean.componentName}" />
					</ice:commandSortHeader>
				</f:facet>
				<ice:outputText value="#{dataItem.component}"
			rendered="#{!componentConfigBean.editModeRow}" />
		<ice:inputText value="#{dataItem.component}"
			rendered="#{componentConfigBean.editModeRow}"/>
			
			</ice:column>

			<!-- Property name  -->
			<ice:column>
				<f:facet name="header">
					<ice:commandSortHeader
						columnName="#{componentConfigBean.propertyName}" arrow="true">
						<ice:outputText value="#{componentConfigBean.propertyName}" />
					</ice:commandSortHeader>
				</f:facet>
						<ice:outputText value="#{dataItem.propName}"
			rendered="#{!componentConfigBean.editModeRow}" />
		<ice:inputText value="#{dataItem.propName}"
			rendered="#{componentConfigBean.editModeRow}"/>
			</ice:column>

			<!-- Property Value -->
			<ice:column>
				<f:facet name="header">
					<ice:commandSortHeader
						columnName="#{componentConfigBean.propertyValue}" arrow="true">
						<ice:outputText value="#{componentConfigBean.propertyValue}" />
					</ice:commandSortHeader>
				</f:facet>
				<ice:outputText value="#{dataItem.value}"
			rendered="#{!componentConfigBean.editModeRow}"/>
		
		<ice:inputText value="#{dataItem.value}"
			rendered="#{componentConfigBean.editModeRow}"/>
			</ice:column>

		
			<!-- control buttons -->
			<f:facet name="footer">
				<ice:panelGrid columns="4">
							<ice:commandButton value="ALL" action="#{componentConfigBean.actionAdd}"
						disabled="#{componentConfigBean.editModeRow}" />
					<ice:commandButton value="ADD" action="#{componentConfigBean.actionAdd}"
						disabled="#{componentConfigBean.editModeRow}" />
					<ice:commandButton value="EDIT"
						action="#{componentConfigBean.actionEdit}"
						disabled="#{componentConfigBean.editModeRow}" />
					<ice:commandButton value="SAVE"
						action="#{componentConfigBean.actionSave}"
						rendered="#{!componentConfigBean.editModeRow}" id="saveCC" />
					<ice:commandButton value="DELETE"
						action="#{componentConfigBean.actionDelete}"
						disabled="#{componentConfigBean.editModeRow}" />
					<ice:commandButton value="CANCEL"
						action="#{componentConfigBean.actionRefresh}" immediate="true"
						rendered="#{componentConfigBean.editModeRow}" />
					<ice:commandButton value="REFRESH"
						action="#{componentConfigBean.actionRefresh}" immediate="true"
						rendered="#{!componentConfigBean.editModeRow}" />
				</ice:panelGrid>
			</f:facet>
		</ice:dataTable>

		<!-- Paginator with page controls -->
		<ice:dataPaginator id="dataScroll_3" for="componentConfigBean"
			paginator="true" fastStep="3" paginatorMaxPages="4">
			<f:facet name="first">
				<ice:graphicImage url="/xmlhttp/css/rime/css-images/arrow-first.gif"
					style="border:none;" title="First Page" />
			</f:facet>
			<f:facet name="last">
				<ice:graphicImage url="/xmlhttp/css/rime/css-images/arrow-last.gif"
					style="border:none;" title="Last Page" />
			</f:facet>
			<f:facet name="previous">
				<ice:graphicImage
					url="/xmlhttp/css/rime/css-images/arrow-previous.gif"
					style="border:none;" title="Previous Page" />
			</f:facet>
			<f:facet name="next">
				<ice:graphicImage url="/xmlhttp/css/rime/css-images/arrow-next.gif"
					style="border:none;" title="Next Page" />
			</f:facet>
			<f:facet name="fastforward">
				<ice:graphicImage url="/xmlhttp/css/rime/css-images/arrow-ff.gif"
					style="border:none;" title="Fast Forward" />
			</f:facet>
			<f:facet name="fastrewind">
				<ice:graphicImage url="/xmlhttp/css/rime/css-images/arrow-fr.gif"
					style="border:none;" title="Fast Backwards" />
			</f:facet>
		</ice:dataPaginator>

		<!-- Display counts about the table and the currently displayed page -->
		<ice:dataPaginator id="dataScroll_2" for="componentConfigBean"
			rowsCountVar="rowsCount" displayedRowsCountVar="displayedRowsCount"
			firstRowIndexVar="firstRowIndex" lastRowIndexVar="lastRowIndex"
			pageCountVar="pageCount" pageIndexVar="pageIndex">
			<ice:outputFormat
				value="{0} records found, displaying {1} record(s), from {2} to {3}. Page {4} / {5}."
				styleClass="standard">
				<f:param value="#{rowsCount}" />
				<f:param value="#{displayedRowsCount}" />
				<f:param value="#{firstRowIndex}" />
				<f:param value="#{lastRowIndex}" />
				<f:param value="#{pageIndex}" />
				<f:param value="#{pageCount}" />
			</ice:outputFormat>
		</ice:dataPaginator>

	</div>